<template>
  <div>

    <el-row>
      <el-col :span="24">
        <el-form :inline="true">


          <el-form-item>
            <el-button type="primary" @click="showAddServiceTypeWindow">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="24">

        <el-table :data="serviceTypeList" style="width: 100%" >

          <el-table-column prop="stname" label="服务类型名称" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="操作" width="230" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="showUpdateServiceTypeWindow(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteServiceTypeById(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--新增窗口-->
    <el-dialog title="新增" :visible.sync="addServiceTypeWindow">
      <el-form label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请输入名称:">
              <el-input v-model="sTName" placeholder="请输入名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addServiceTypeWindow = false">取 消</el-button>
        <el-button @click="insertServiceType">新 增</el-button>
      </div>
    </el-dialog>

    <!--修改窗口-->
    <el-dialog title="修改" :visible.sync="updateServiceTypeWindow">
      <el-form :model="updateServiceTypeForm" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="输入新名称:">
              <el-input v-model="updateServiceTypeForm.stname" placeholder="请输入名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateServiceTypeWindow = false">取 消</el-button>
        <el-button @click="updateServiceType">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Product",
    data() {
      return {
        serviceTypeList: [], //服务种类集合
        addServiceTypeWindow: false, //新增窗口
        sTName: null, //新增服务种类名
        updateServiceTypeWindow: null, //修改窗口
        updateServiceTypeForm: {
          stid: "",
          stname: "",
        },
        stid: "",
        headers: {}
      }

    },
    methods: {
      //展开修改种类窗口
      showUpdateServiceTypeWindow(row) {
        this.updateServiceTypeForm.stid = JSON.parse(JSON.stringify(row)).stid
        this.updateServiceTypeWindow = true
      },
      //修改种类信息
      updateServiceType() {
        this.$http.post("/product/serviceType/updateServiceType.api", this.updateServiceTypeForm).then(resp => {
          if (resp.data.code == 200) {
            this.loadServiceType();
            this.SuccessTip(resp.data);
            this.updateServiceTypeWindow = false;
            this.updateServiceTypeForm.stname = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //删除单个商品种类
      deleteServiceTypeById(row) {
        this.stid = JSON.parse(JSON.stringify(row)).stid; //获取id
        this.$http.post("/product/serviceType/deleteServiceType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadServiceType();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pTIds.clear();
        })
      },
      //新增种类
      insertServiceType() {
        this.$http.get("/product/serviceType/insertServiceType.api", {
          params: {
            sTName: this.sTName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadServiceType();
            this.SuccessTip(resp.data);
            this.addServiceTypeWindow = false
            this.sTName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //新增商品种类窗口
      showAddServiceTypeWindow() {
        this.addServiceTypeWindow = true
      },
      //查询商品种类
      loadServiceType() {
        this.$http.get("/product/serviceType/findAllServiceType.c").then(resp => {
          if (resp.data.code == 200) {
            this.serviceTypeList = resp.data.data
          } else {
            // this.ErrorTip(resp.data)
          }
        })
      },
      //状态展示
      getStateText(state) {
        switch (state) {
          case 0:
            return '正常';
          case 1:
            return '禁用';
          case 2:
            return '删除';
          default:
            return '未知状态';
        }
      },
      SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
    },
    created() {
      this.loadServiceType();
      this.headers["token"] = localStorage.getItem("token");
    }
  }
</script>


<style scoped>
  .custom-input .el-input__inner {
    border: none;
    background-color: transparent;
    pointer-events: none;
  }
</style>
